<template>
  <div id="table">
    <div id="table-wrap">
      <div id="table-title">
        <div id="table-title-left">
          <span>桌号{{ pk.id }}</span>
        </div>
      </div>
      <div id="table-main-area">
        <div id="border">
          <div v-for="row in 15" :key="row">
            <div v-for="col in 15" :key="col">
              <i :id="'s' + (row - 1) + '-' + (col - 1)" class="" @click="putstone(row - 1, col - 1)" />
            </div>
          </div>
        </div>
        <div id="table-msgbox" style="display: none;">
          <div id="table-msgbox-val" />
          <div id="table-msgbox-btbox" />
        </div>
      </div>
      <!-- 右侧区域 -->
      <div id="table-right-area">
        <div id="tbr-top">
          <div id="tbr-user2name">
            <div id="tbr-user1">
              <span class="tbr-user-style">{{ yquser.nickName }}</span>
              <span class="stone-left tbr-black-stone" />
            </div>
            <div id="tbr-user1">
              <span class="tbr-user-style">{{ pk.status != 0 ? byquser.nickName : '等待中...' }}</span>
              <span class="stone-right tbr-white-stone" />
            </div>
          </div>
        </div>
        <div id="tbr-quick-select">
          <div id="ask-peace">
            <button disabled="">求和</button>
            <button disabled="">认输</button>
          </div>
        </div>
        <div id="tbr-option">
          <div id="tbr-option-menu">
            <span class="opt-select-style opt-select">消息</span>
            <span class="opt-select-style">观战(0)</span>
          </div>
          <div id="tbr-option-area">
            <div id="tbr-im" style="display: none;">
              <div id="tbr-im-wrap">
                <div id="tbr-im-msg">
                  <div style="text-align: center; color: gray; font-size: 12px;">
                    提示：信息仅对局双方可见
                    <br>
                    启用聊天功能需要桌主
                    <b style="cursor: pointer; text-decoration: underline;">设置桌位密码</b>
                  </div>
                </div>
                <div id="tbr-im-ip">
                  <input placeholder="Enter 发送信息" type="text">
                  <button>发送</button>
                </div>
              </div>
            </div>
            <div id="tbr-witness-list" style="display: none;" />
          </div>
        </div>
        <div id="tbr-bottom-bt-wrap">
          <div class="tbr-bottom-bt">退出</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pk: {},
      yquser: {},
      byquser: {},
      userinfo: {},
      qiPanList: []
    }
  },
  created() {
    this.getOnePk()
  },
  methods: {
    putstone(row, col) {
      console.log('放置棋子', row, col)
      // 这里可以添加放置棋子的逻辑
    }
    // 其他方法...
  }
}
</script>

<style scoped>
/* 添加样式 */
</style>
